{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>场景编辑</title>
    <link rel="stylesheet" type="text/css" href="{% static 'panorama/css/common.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'panorama/css/edit.css' %}"/>
    <script src="{% static 'panorama/lib/three.js/Detector.js' %}"></script>
</head>
<body>
<script>
    if (!Detector.webgl) {
        Detector.addGetWebGLMessage();
        throw '浏览器不支持WebGL';
    }
</script>
<div id="loading">
    <div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

<img src="{% static 'panorama/img/play.png' %}" id="play-btn">
<div id="edit-sidebar">
    <div id="name-bar">
        <div style="float:left;margin-top:12px;margin-left:20px;"><img src="{% static 'panorama/img/icon/logo.png' %}">
        </div>
    </div>
    <div id="option-bar">
        <a id="show-add-dialog">添加空间</a>
        <div>
            <a id="edit-info">编辑信息</a>
            <a id="save-as">保存</a>
            <a id="preview">预览</a>
            <div id="qr-code">
                <span class="qr-text" style="margin-top:20px;">微信扫一扫 查看全景图</span>
                <div>
                    <canvas id="qr-canvas" title="扫码浏览"></canvas>
                </div>
                <a href="#" id="view-link" target="_blank">点击打开全景图</a>
            </div>
        </div>
    </div>

    <!-- 空间列表 -->
    <ul id="space-bar"></ul>
</div>

<!-- 热点编辑面板 -->
<div id="edit-panel">
    <div class="panel-header" id="cancel-edit" title="退出编辑">&gt;&gt;</div>
    <div class="panel-body">
        <label for="input-hot-id">热点编号：</label>
        <input type="text" value="" id="input-hot-id" disabled="disabled">
        <label for="input-hot-title">标题：</label>
        <input type="text" value="" id="input-hot-title">
        <label for="input-hot-to">跳转至：</label>
        <select id="input-hot-to"></select>
        <fieldset>
            <legend>平移</legend>
{#            <label for="input-position-x">上下：</label>#}
            <div class="range">
                <i>下</i>
                <input type="range" min="-140" max="140" step="1" data-default="0" value="0" id="input-position-x"/>
                <i>上</i>
            </div>
{#            <label for="input-position-y">前后：</label>#}
            <div class="range">
                <i>后</i>
                <input type="range" min="-140" max="140" step="1" data-default="0" value="0" id="input-position-y"/>
                <i>前</i>
            </div>
{#            <label for="input-position-z">左右：</label>#}
            <div class="range">
                <i>左</i>
                <input type="range" min="-140" max="140" step="1" data-default="0" value="0" id="input-position-z"/>
                <i>右</i>
            </div>
        </fieldset>
        <label for="input-opacity">透明度：</label>
        <div class="range">
            <i>-</i>
            <input type="range" min="0.3" max="0.8" step="0.01" data-default="0.5" value="0.5" id="input-opacity"/>
            <i>+</i>
        </div>
    </div>
    <div class="panel-footer">
        <button id="delete-hot-btn">删除热点</button>
        <button id="save-hot-info">保存</button>
        <button id="reset-hot-info">重置</button>
    </div>
</div>

<!--编辑商家信息-->
<div class="dialog" id="edit-seller-dialog">
    <div class="dialog-title">
        <div class="dialog-name">编辑信息</div>
        <div class="dialog-close">×</div>
    </div>
    <form action="{% url 'update_seller' %}" enctype="multipart/form-data" method="post" target="upload_iframe">
        <div class="dialog-ele" style="margin-top:60px;">
            <div class="dialog-ele-title">商家logo:</div>
            <div class="dialog-ele-content">
                <label for="logo-input" id="upload-pic" class="btn">重新上传</label>
                <input type="file" id="logo-input" name="logo" accept="image/gif, image/jpeg, image/png"
                       style="display: none">
            </div>
        </div>
        <div class="dialog-ele" id="dialog-img-ele" style="height:110px;">
            <div class="dialog-ele-title"></div>
            <div class="dialog-ele-content" style="height:110px;">
                <img id="seller-logo" src=""/>
            </div>
        </div>
        <div class="dialog-ele" style="">
            <div class="dialog-ele-title">商家名称:</div>
            <div class="dialog-ele-content">
                <input type="text" id="seller-name" name="name" placeholder="限制10个字" value="" maxlength="10"/>
            </div>
        </div>
        <div class="dialog-ele" style="height:130px;">
            <div class="dialog-ele-title">商家介绍:</div>
            <div class="dialog-ele-content" style="height:120px;margin-top:10px;">
                <textarea id="seller-desc" name="desc" placeholder="输入商家介绍，限制60字" maxlength="60"></textarea>
            </div>
        </div>
        <input type="hidden" id="seller_id" name="seller_id" value="">
        <input type="hidden" name="cb" value="getResultStr">
    </form>
    <div class="dialog-operation" style="margin:50px auto 50px 220px;">
        <a class="btn dialog-cancel">取消</a>
        <a class="btn" id="add-space-btn">确定</a>
    </div>
</div>
<iframe id="upload_iframe" name="upload_iframe" src="" style="display: none;"></iframe>

<!--另存为-->
<div class="dialog" id="save-as-dialog">
    <div class="dialog-title">
        <div class="dialog-name">保存为</div>
        <div class="dialog-close">×</div>
    </div>
    <div class="dialog-ele" style="margin-top:70px;">
        <input type="text" id="scene-title" placeholder="输入全景图名称，限制10个字" value="" maxlength="10"/>
    </div>
    <div class="dialog-operation" style="margin:50px auto 60px 115px;">
        <a class="btn dialog-cancel">取消</a>
        <a class="btn dialog-confirm">确定</a>
    </div>

</div>

<!--添加空间-->
<div class="dialog" id="add-space-dialog">
    <div class="dialog-title">
        <div class="dialog-name">添加空间</div>
        <div class="dialog-close">×</div>
    </div>
    <div id="spaces-container"></div>
    <div class="dialog-operation" style="margin:40px auto 20px 275px;">
        <a class="btn dialog-cancel">取消</a>
        <a class="btn dialog-confirm">确定</a>
    </div>
</div>

<span id="hot-title"></span>

<div id="context-menu">
    <ul>
        <li id="show-add-hot-dialog-btn">在此处添加热点</li>
        <li class="disabled">修改此热点</li>
        <li class="disabled">删除此热点</li>
    </ul>
</div>

<!-- 添加热点对话框 -->
<div id="add-hot-dialog">
    <div class="header">选择目标场景:<i>×</i></div>
    <div class="body">
        <select title=""></select>
        <input type="text" placeholder="热点标题">
    </div>
    <div class="footer">
        <button class="add-btn">添加</button>
        <button class="redo-btn">重新选择</button>
    </div>
</div>

<!-- 编辑热点对话框 -->
<div id="edit-hot-dialog">
    <div class="header">编辑热点:<i>×</i></div>
    <div class="body">
        <label>
            跳转至：
            <select title=""></select>
        </label>
        <br>
        <label>
            描述：
            <input type="text" name="title">
        </label>
    </div>
    <div class="footer">
        <button class="btn del-btn">删除</button>
        <button class="btn update-btn">更新</button>
    </div>
</div>

<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="{% static 'panorama/lib/jquery_2_2_4.min.js' %}"><\/script>')</script>
<script src="//cdn.bootcss.com/jquery-easing/1.3/jquery.easing.min.js"></script>
<script>$.easing.easeInOutQuad || document.write('<script src="{% static 'panorama/lib/jquery.easing_1_3.min.js' %}"><\/script>')</script>
<script src="{% static 'panorama/lib/jquery-ui.min.js' %}"></script>
<script src="{% static 'panorama/lib/three.js/stats.min.js' %}"></script>
<script src="{% static 'panorama/lib/three.js/three.js' %}"></script>
<script src="{% static 'panorama/lib/three.js/DeviceOrientationControls.js' %}"></script>
<script src="{% static 'panorama/lib/three.js/OrbitControls.js' %}"></script>
<script src="{% static 'panorama/lib/tweenjs/Tween.js' %}"></script>
<script src="{% static 'panorama/lib/qrcode.min.js' %}"></script>
<script src="{% static 'panorama/js/polyfill.js' %}"></script>
<script src="{% static 'panorama/js/utils.js' %}"></script>
<script src="{% static 'panorama/js/panorama.js' %}"></script>
<script src="{% static 'panorama/js/edit.js' %}"></script>
</body>
</html>